import React, { Component } from "react";
import { NavBar } from "antd-mobile";
import { List, AutoSizer } from "react-virtualized";
import { Toast } from "antd-mobile";
import {
  get_All_City_List,
  get_Current_CityData,
  get_Hot_City_List,
} from "../../utils/http_biz";
import "./citylist.scss";
import { CURRENT_CITY_KEY } from "../../utils/config";

class CityList extends Component {
  state = {
    selectIndex: 0, //表示当前选中的城市索引 号是0
    citylist: {
      "#": [
        {
          label: "北京",
          value: "#",
        },
      ],
      热: [
        {
          label: "北京",
          value: "AREA|88cff55c-aaa4-e2e0",
          pinyin: "beijing",
          short: "bj",
        },
        {
          label: "广州",
          value: "AREA|e4940177-c04c-383d",
          pinyin: "guangzhou",
          short: "gz",
        },
        {
          label: "上海",
          value: "AREA|dbf46d32-7e76-1196",
          pinyin: "shanghai",
          short: "sh",
        },
        {
          label: "深圳",
          value: "AREA|a6649a11-be98-b150",
          pinyin: "shenzhen",
          short: "sz",
        },
      ],
    },

    cityIndex: ["#", "热"], // #：代表当前城市  热：代表热门城市
  };

  // 实现数据动态化的功能
  /*步骤：1、请求接口：/area/city?level=1 请求到一级城市数据 数据格式：
            {
            "status": 200,
            "description": "请求成功",
            "body": [
                {
                "label": "北京",
                "value": "AREA|88cff55c-aaa4-e2e0",
                "pinyin": "beijing",
                "short": "bj"
                }
            ]
  2、由于我们的数据结构和服务器的数据结构不一致，所以必须进行转换成一致的数据结构
    {
      'b':[
       {
                "label": "北京",
                "value": "AREA|88cff55c-aaa4-e2e0",
                "pinyin": "beijing",
                "short": "bj"
                }
      ]
    }
   */
  componentDidMount() {
    this.getCityList();
  }
  async getCityList() {
    let { body } = await get_All_City_List();
    //   将body数据转成我们需要的数据结构
    let cityData = {};
    //   给cityData加上当前数据
    let { label, value } = await get_Current_CityData();
    // console.log("body===>", arr_body);
    cityData["#"] = [{ label, value }];

    //   给cityData加上热门数据
    let hotData = await get_Hot_City_List();
    // console.log("hotArr===>", hotArr.body);
    cityData["#热"] = hotData.body;

    body.forEach((item) => {
      // 1.0 取得拼音缩写的首字母
      let shortFirstChar = item.short.slice(0, 1);
      // 2.0判断当前的字母是否在cityData对象中存在，如果不存在则加入，否则，直接往里边push数据即可
      if (cityData[shortFirstChar]) {
        // 表示有
        cityData[shortFirstChar].push(item);
      } else {
        // 表示没有
        cityData[shortFirstChar] = [item];
      }
    });

    // console.log(cityData);
    // 将cityData更新状态对象中的citylist属性同时要将cityIndex更新
    let cityindex = Object.keys(cityData);
    //   给cityindex数组进行排序(升序排列)
    cityindex.sort();
    this.setState({ citylist: cityData, cityIndex: cityindex });
  }

  // 虚拟列表的行渲染方法,它负责渲染每一行内容
  rowRenderer = ({
    key, // 每一行的唯一标识
    index, // 行索引 （重点关注：项目中要使用的是索引）
    isScrolling, // 是否滚动
    isVisible, // 行是否可见
    style, // 样式
  }) => {
    //   结构出state对象中的 citylist和cityIndex
    let { cityIndex, citylist } = this.state;
    let indexName = cityIndex[index]; //获取到城市索引名称
    let clist = citylist[indexName]; // clist 本质上是一个数组

    return (
      <div key={key} style={style} className="item">
        {/* 此div渲染的是城市索引：A,B,C */}
        <div className="itemIndex">{this.FormatString(indexName)}</div>
        {clist.map(({ label, value }) => (
          // div渲染的是每个城市数据
          <div
            key={value}
            className="itemName"
            onClick={() => {
              if (["北京", "上海", "广州", "深圳"].indexOf(label) <= -1) {
                //   没有选择四个有房源城市的数据，则提示用户该地区没有开通房源
                Toast.info(
                  `${label}这个城市未开发房源数据,请从热门城市中选择`,
                  0.8
                );
                return;
              }
              // 将当前选择的城市对象存储到本地存储中
              localStorage.setItem(
                CURRENT_CITY_KEY,
                JSON.stringify({ label, value })
              );

              // 跳转会首页
              this.props.history.push("/home/index");
            }}
          >
            {label}
          </div>
        ))}
      </div>
    );
  };

  // 每一项的行高动态计算方法
  rowHeight = ({ index }) => {
    // console.log("rowHeight=", index);
    // 动态计算每一个行的行高计算公式： 城市索引div高度36 + 城市div高度 50 * 城市个数
    let { cityIndex, citylist } = this.state;
    let cityCount = citylist[cityIndex[index]].length;
    let height = 36 + 50 * cityCount;
    return height;
  };

  // 右边索引区域相关方法
  // 1.0 将字符串转成大写
  FormatString = (str) => {
    if (str == "#热") {
      return "热";
    }
    return str.toUpperCase();
  };
  onRowsRendered = ({
    overscanStartIndex,
    overscanStopIndex,
    startIndex, // 开始索引，当每一项靠近最顶部的时候回显示这一项的索引值
    stopIndex,
  }) => {
    // console.log("startIndex=", startIndex);
    //   将state对象中的selectedIndex的值修改成startIndex
    this.setState({ selectIndex: startIndex });
  };

  // 创建一个List的非受控组件对象
  listRef = React.createRef();

  render() {
    return (
      <div className="citylist">
        {/* 1.0 导航栏 */}
        <NavBar
          mode="light"
          icon={<i className="iconfont icon-back"></i>}
          onLeftClick={() => {
            // 点击左边箭头的时候返回到首页: /home/index
            this.props.history.push("/home/index");
          }}
        >
          城市选择
        </NavBar>
        {/* 2.0 使用虚拟列表组件完成程序列表数据的展示 */}
        {/* 进行代码迁移：https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md */}

        <AutoSizer>
          {({ height, width }) => (
            <List
              ref={this.listRef} // 将组建绑定到非受控组件对象上
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length} // 表示虚拟列表要显示的行数
              rowHeight={this.rowHeight} // 表示每一行的行高
              rowRenderer={this.rowRenderer} // 渲染每一行
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment="start" // 解决虚拟列表自动滚动不精确的问题
            />
          )}
        </AutoSizer>

        {/* 3.0 右边的城市索引 */}
        <div className="rightindex">
          <ul>
            {this.state.cityIndex.map((item, index) => (
              <li
                key={item}
                className={this.state.selectIndex === index ? "active" : ""}
                onClick={() => {
                  // 调用list对象的scrollToRow(索引) 来实现列表自动滚动到索引的指定位置
                  this.listRef.current.scrollToRow(index);
                  //   console.log("listRef==", this.listRef);
                }}
              >
                {this.FormatString(item)}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default CityList;
